<template>
  <!--模板-->
  <span v-if="list.length > 0">
    {{title[kind]}}
  </span>
  <el-select-v2
    v-if="list.length > 0"
    v-model="value"
    :options="list"
    size="small"
    :placeholder="placeholder"
    style="width: 240px;"
    multiple
    clearable
    collapse-tags
    collapse-tags-tooltip
    :height="300"
    @click="mychange($event)"
    :teleported="false"
  />
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, watch } from 'vue'
  import { getRoleState } from '../state/state-role'

  const dic = {
    gridIds: 'grids',
    gridIdsNot: 'grids',
    findIds: 'finds',
    findIdsNot: 'finds',
    resources: 'resources',
    APIs: 'APIs'
  }

  const title = {
    gridIds: '　　可用列：',
    gridIdsNot: '　不可用列：',
    findIds: '　可用查询：',
    findIdsNot: '不可用查询：',
    resources: '　资源权限：',
    APIs: '　可用API ：'
  }

  export default defineComponent({
    name: 'ui-core-',
    props: {
      moduleId: {
        type: [String, Number],
        default: 4
      },
      kind: {
        type: String,
        default: 'gridIds'
      },
      placeholder: {
        type: String,
        default: '权限到列表的列'
      }
    },
    setup(props, context) {

      const value = ref([])
      // eslint-disable-next-line vue/no-setup-props-destructure
      const { kind } = props

      // 获取状态
      const state = getRoleState()

      // 根据类型，获取下拉列表的备选项
      const list = state[dic[kind]][props.moduleId]?? reactive([])

      if (state.haveCols[props.moduleId]) {
        if (state.haveCols[props.moduleId] === false) {
          state.haveCols[props.moduleId] = (list.length > 0)
        }
      } else {
        state.haveCols[props.moduleId] = (list.length > 0)
      }

      // 监听选项值，设置角色
      watch(value, () => {
        if (value.value.length === 0) {
          delete state.roleInfo.rolePower[kind][props.moduleId]
        } else {
          state.roleInfo.rolePower[kind][props.moduleId] = value.value
        }
      })


      const mychange = (e) => {
        // console.log('change----e', buttonId, e)
        // 防止事件冒泡
        // e.stopPropagation()

      }

      return {
        title,
        value,
        list,
        mychange

      }
    }
  })
</script>